<template>
  <div class="goodsDetail">
    <div class="carousel">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide v-for="(item, index) in swiperData" :key="index">
          <img class="myswiper_img" :src="item.img" alt="" />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <div class="topnav" @click="goBack()">
        <span class="el-icon-back">&#xe779;</span>
      </div>
    </div>
    <!-- 价格信息 -->
    <div class="product_meta">
      <div class="price_meta">
        <div class="price">
          <span class="price_now">¥{{ list.price }}</span>
          <span class="discount">¥9999</span>
        </div>
        <div class="sell_num">已销 9999 件</div>
      </div>
      <div class="desc">
        {{ list.title }}
      </div>
    </div>
    <div class="details">
      <div class="details_img">
        <h3>商品详情</h3>
        <img :src="list.img" />
        <h2>毫秒之间，慢的妙处 HUAWEI P20 Pro</h2>
        <p>可实现32倍慢动作拍摄，为你捕捉毫秒之间的乐趣。</p>
        <p>一秒记忆，960个定格*，你的世界，从此超出你所见。</p>
        <p>* 该功能是指用户在慢动作模式下最高可录制960帧每秒的高速视频。</p>
        <img
          src="https://consumer.huawei.com/content/dam/huawei-cbg-site/common/mkt/pdp/phones/p20-pro-update1/img/camera/slow/slow13.jpg"
        />
      </div>
    </div>
    <!-- 底部栏购物栏 -->
    <div class="shopcart">
      <div class="shopcart_cart">
        <span class="el-icon-goods" style="height:80%;"></span>
      </div>
      <el-input-number
        v-model="num"
        controls-position="right"
        :min="1"
      ></el-input-number>
      <div class="shopcart_add" @click="butto()">加入购物车</div>
      <div class="shopcart_add" @click="buycar()">立即够买</div>
    </div>
  </div>
</template>

<script>
export default {
  //定义的数据
  data() {
    return {
      num: "",
      swiperData: [],
      list: [],
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          dynamicBullets: true
        },
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        }
      },
      activeIndex: 99,
      shopId: "",
      price: ""
    };
  },
  //预加载事件
  mounted() {
    this.shopId = this.$route.query.id;
    this.getIndexData();
  },
  methods: {
    //获取商品详情
    getIndexData() {
      let that = this;
      this.$axios
        .get("/info", {
          params: {
            id: this.shopId
          }
        })
        .then(response => {
          //返回的相册数据存进shopImg
          that.swiperData = response.data.shopImg;
          //把返回来的数据存进list里
          that.list = response.data.data;
          //获取价钱
          that.price = that.list.price;
        })
        .catch(error => {
          console.log(error);
        });
    },
    goBack() {
      this.$router.go(-1);
    },
    //添加购物车
    butto() {
      let that = this;
      // var token=localStorage.get('token');
      var token = "b4107f24ca802cb5931777bc8ac82cb9";
      this.$axios
        .post("create", {
          id: that.shopId,
          price: that.price,
          num: that.num,
          token: token
        })
        .then(response => {
          console.log(response.data);
          if (response.data.code === 3) {
            that.$message(response.data.message);
          } else if (response.data.code === 1) {
            that.$message(response.data.message);
          } else {
            that.$message(response.data.message);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    buycar() {
      this.$router.push({
        path: "/buycar" //购物车页面
      });
    }
  }
};
</script>

<style lang="less" scoped>
// 主题色
@themeColor: #fc600c;

// 背景色
@bgColor: #eee;
@bgColor2: #ccc;

// 字号大小
@sizeXL: 26px;
@sizeL: 18px;
@sizeL_2: 16px;
@sizeM: 14px;
@sizeS: 12px;

// 字体色
@fontColor1: #000;
@fontColor2: #7e7c7c;
.goodsDetail {
  // 顶部轮播图
  .carousel {
    position: relative;
    /deep/ .swiper-pagination-bullet-active {
      background: #fff;
    }
    .myswiper_img {
      width: 100%;
      height: 375px;
    }
    .topnav {
      position: absolute;
      top: 0.266rem;
      left: 0.213rem;
      z-index: 99;
      width: 1.12rem;
      height: 1.12rem;
      text-align: center;
      line-height: 1.12rem;
      color: #fff;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.5);
    }
  }
  // 价格信息
  .product_meta {
    margin: 0.32rem 0.32rem 0 0.32rem;
    border-bottom: 1px dashed @bgColor;
    .price_meta {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .price {
        padding-bottom: 0.32rem;
        .price_now {
          color: @themeColor;
          font-size: @sizeXL;
        }
        .discount {
          color: @fontColor2;
          font-size: @sizeM;
          text-decoration: line-through;
        }
      }
      .sell_num {
        color: @fontColor2;
        font-size: @sizeM;
      }
    }
    .desc {
      margin-bottom: 0.32rem;
      width: 100%;
      height: 40px;
      font-size: 16px;
      line-height: 40px;
    }
  }
  // 尺码
  .produce_size {
    padding: 0 0.23rem;
    border-bottom: 1px solid @bgColor;
    .size_title {
      font-size: @sizeL_2;
      color: @fontColor1;
      margin: 0.32rem 0;
    }
    .size_content {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      .size_item {
        width: 2.746667rem;
        height: 0.8rem;
        margin-bottom: 0.32rem;
        text-align: center;
        line-height: 0.8rem;
        color: @fontColor1;
        border: 1px solid @bgColor2;
      }
      .size_item_on {
        border-color: @themeColor;
        color: @themeColor;
      }
    }
  }
  // 商务文案
  .service_text {
    display: flex;
    flex-direction: row;
    padding: 0.23rem;
    border-bottom: 1px solid @bgColor;
    .service_text_item {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-right: 0.4rem;
      .service_text_item_icon {
        color: @themeColor;
        margin-right: 0.053333rem;
      }
    }
  }
  // 详情图片
  .details {
    .details_img {
      img {
        width: 100%;
        height: auto;
      }
    }
  }
  // 底部栏购物栏
  .shopcart {
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 10%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 0 0.32rem;
    background: #fff;
    .shopcart_cart {
      width: 2.266667rem;
      height: 1.12rem;
      border: 1px solid @bgColor2;
      text-align: center;
      line-height: 1.12rem;
      border-radius: 2px;
      .shopcart_cart_icon {
        font-size: @sizeXL;
      }
    }
    .shopcart_add {
      width: 6.826667rem;
      height: 2.12rem;
      text-align: center;
      line-height: 2.12rem;
      background: @themeColor;
      color: #fff;
      font-size: @sizeL;
      border-radius: 2px;
      cursor: pointer;
    }
  }
}
</style>
